<template>
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="用户名">
        <el-input v-model="searchFrom.username" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="电影名称">
        <el-select v-model="searchFrom.filmId"
                   style="width:220px;"
                   placeholder="请选择电影名称">
          <el-option
              v-for="item in filmList"
              :key="item.id"
              :label="item.filmName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="getComments">搜索</el-button>
      </el-form-item>
    </el-form>

  </el-card>

  <el-card style="margin:10px 20px 0 20px;">
    <el-table :data="paginatedData" style="width: 100%" height="500px" show-overflow-tooltip>
      <el-table-column type="index" label="序号" width="80" align="center"/>
      <el-table-column prop="userId" label="用户ID" width="180" align="center"/>
      <el-table-column prop="username" label="用户名" width="120" align="center"/>
      <el-table-column prop="nickname" label="昵称" width="100" align="center"/>
      <el-table-column prop="filmName" label="电影名称" width="150" align="center"/>
      <el-table-column prop="content" label="评论内容" width="300"/>
      <el-table-column prop="isDelete" label="是否删除" width="80" align="center">
        <template #default="scope">
          <span v-if="scope.row.isDelete  == 0">未删除</span>
          <span v-else-if="scope.row.isDelete  == 1">已删除</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="100" align="center"/>
      <el-table-column label="操作" width="80" align="center" fixed="right">
        <template #default="scope">
          <el-button type="danger" size="small" v-if="scope.row.isDelete  == 0"
                     @click="deleteComment(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-card style="margin:10px 20px 0 20px;">
    <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableData.length"
        @current-change="handlePageChange"
        style="margin-left: 35%;"
    />
  </el-card>
</template>

<script setup>
import {ref, onMounted, computed} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage, ElMessageBox} from "element-plus";

// 用户评论列表
const tableData = ref([0]);
const currentPage = ref(1);// 默认显示页码
const pageSize = ref(9); // 每页显示几条

// 计算当前页面的数据
const paginatedData = computed(() => {
  const offset = (currentPage.value - 1) * pageSize.value;
  return tableData.value.slice(offset, offset + pageSize.value);
});

// 分页变化时触发
const handlePageChange = (newPage) => {
  currentPage.value = newPage;
};
const filmList = ref([]);
const getFilmList = () => {
  axios.get(BASE_URL + '/v1/film/select?')
      .then((response) => {
        if (response.data.code === 2000) {
          filmList.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
};
onMounted(() => {
  getFilmList();
})
const searchFrom = ref({
  username: '',
  filmId: '',
});
// 获取评论数据
const getComments = () => {
  let data = qs.stringify({
    username: searchFrom.value.username,
    filmId: searchFrom.value.filmId,
  })
  console.log(data);
  axios.get(BASE_URL + '/v1/comments/searchAll?' + data)
      .then((response) => {
        if (response.data.code === 2000) {
          tableData.value = response.data.data;
          console.log(tableData.value);
        } else {
          ElMessage({
            message: response.data.msg,
            type: "error",
            showClose: true,
            center: true,
          });
        }
      })
};
const resetSearch = () => {
  searchFrom.value = {
    username: "",
    filmId: "",
  };
  getComments();
};
// 页面加载时获取评论
onMounted(() => {
  getComments();
});
// 删除评论
const deleteComment = (commentId) => {
  ElMessageBox.confirm("确定要删除这条评论吗？", "提示", {
    customClass: "custom-message-box",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        axios.put(BASE_URL + '/v1/comments/delete/' + commentId)
            .then((response) => {
              if (response.data.code === 2000) {
                ElMessage({
                  message: "删除成功",
                  type: "success",
                  showClose: true,
                  center: true,
                });
                getComments(); // 刷新评论列表
              } else {
                ElMessage({
                  message: response.data.msg || "删除失败",
                  type: "error",
                  showClose: true,
                  center: true,
                });
              }
            })

      })
      .catch(() => {
        ElMessage({
          message: "已取消删除",
          type: "info",
          showClose: true,
          center: true,
        });
      });
};

</script>

<style scoped>

h2 {
  margin-bottom: 20px;
}
</style>